<template>
  <el-dialog :visible="visible" width="60%" top="1%" @close="resetForm">
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :show-btn="true"
      :btn-list="btnList"
    />

    <PageTable :loading="loading" :columns="columns" :data="dataSource" />

    <div class="footer-button">
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getPoiontGoods"
      />
      <div class="text-center">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapMutations } from 'vuex'
import { GOODS_SATAUS_NAME } from '@/enum/goods'
export default {
  name: 'ClassifyPopup',
  components: {},
  props: {
    value: String,
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      goodsId: '',
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '商品名称',
            value: 'name',
            selectList: [],
            labelWidth: '90px',
            style: {
              width: '210px'
            }
          },
          {
            type: 'input',
            label: '所属供应商',
            value: 'supplierName',
            labelWidth: '100px',
            style: {
              width: '210px'
            }
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getPoiontGoods()
          }
        }
      ],
      dataSource: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '商品',
          render: (h, { row }) => {
            return (
              <div class="flex">
                <img
                  style={'width: 60px;height: 60px;'}
                  src={row.mainGraph}
                  previewSrcList={[row.mainGraph]}
                />
                <div class="ml-10 flex flex-col justify-between">{row.name}</div>
              </div>
            )
          }
        },
        {
          prop: 'supplierName',
          label: '所属供应商'
        },
        {
          label: '兑换积分',
          render: (h, { row }) => {
            return <div>{`${row.minPrice}-${row.maxPrice}`}</div>
          }
        },
        {
          label: '状态',
          render: (h, { row }) => {
            return <div>{GOODS_SATAUS_NAME[row.sellType]}</div>
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return <el-checkbox value={row.checked} onChange={() => this.checkedChange(row)} />
          }
        }
      ]
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  created() {
    this.getPoiontGoods()
  },
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_POINT_SELECT']),

    // 获取指向商品
    async getPoiontGoods() {
      const params = {
        ...this.listQuery
      }
      const { name, supplierName } = this.formOption.data
      if (name) params.name = name
      if (supplierName) params.supplierName = supplierName
      const {
        data: { records, total }
      } = await this.$http.goods.goods.getPoiontGoods({ params })
      this.dataSource = records.map(item => {
        if (item.id == this.value) {
          item.checked = true
        } else {
          item.checked = false
        }
        return item
      })
      this.goodsId = this.value
      this.total = total
      this.loading = false
    },
    // 单选商品
    checkedChange(val) {
      this.dataSource = this.dataSource.map(item => {
        if (val.id === item.id) {
          item.checked = true
        } else {
          item.checked = false
        }
        return item
      })
      this.goodsId = val.id + ''
    },
    // 提交选择商品
    submitForm() {
      if (!this.goodsId) {
        this.$message.error('请选择要指向的商品！')
        return
      }
      this.$emit('input', this.goodsId)
      const { mainGraph, name, supplierName, minPrice, maxPrice, sellType } =
        this.dataSource.filter(item => item.id == this.goodsId)[0]
      this.SET_POINT_SELECT({
        key: 'goodsTable',
        data: [{ mainGraph, name, supplierName, minPrice, maxPrice, sellType }]
      })
      this.visible = false
    },
    resetForm() {
      this.visible = false
      this.goodsId = ''
      if (!this.value) {
        this.$emit('input', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-button {
  @include flex();
}
</style>
